<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的购物车</title>
    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.css">
    <style>
        #nav_div img{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            padding: 5px;
        }

        #cart_div img{
            width: 80px;
            transition: all .2s linear;
        }
        #cart_div img:hover{
            width: 85px;
        }
    </style>
</head>
<body>
<!--    导航begin -->
<div class="container-fluid" id="nav_div">
    <div class="row">
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse"
                            data-target="#example-navbar-collapse">
                        <span class="sr-only">切换导航</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">大庆师范学院</a>
                </div>
                <div class="collapse navbar-collapse" id="example-navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="active"><a href="/views/user/index.html">首页</a></li>
                        <li><a href="#">admin</a></li>
                        <li><a href="#" data-toggle="modal" data-target="#myModal">登录</a></li>
                        <li><a href="#">注册</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span>&nbsp;我的购物车</a></li>
                        <li><a href="#">我的订单</a></li>
                        <li><a href="#">安全退出</a></li>
                        <li><img src="/imgs/墨镜流泪.webp"></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</div>
<!--    导航end-->

<!-- 购物车表单begin -->
<div class="container" style="margin-top: 80px" id="cart_div">
    <div class="row">
        <div class="table-responsive">
            <table class="table">
                <caption>购物车信息</caption>
                <thead>
                <tr>
                    <th><input type="checkbox" id="cks" onchange="select_all(this)"></th>
                    <th>序号</th>
                    <th>封面</th>
                    <th>产品名</th>
                    <th>单价</th>
                    <th>描述</th>
                    <th>数量</th>
                    <th>总价</th>
                    <th>创建时间</th>
                    <th>操作选项</th>
                </tr>
                </thead>
                <tbody id="cart_tby">

                </tbody>

                <tfoot>
                <tr class="text-right">
                    <td colspan="10" style="font-size: 30px;color: orangered">
                        结算:<span id="end_sum">0</span>
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>
<!-- 购物车表单end -->

<script src="/plugins/jquery/jquery.min.js"></script>
<script src="/plugins/bootstrap/js/bootstrap.js"></script>

<script>

    // 装total
    let total_list = Array();

    $(function(){
        //从本地存储中获取这个token
        let token = localStorage.getItem("token");
        console.log("===");
        console.log(token);
        console.log(">>>>");
        $.get('/cart?token='+token,function(res){
            console.log(res);
            <!-- 这里==别手贱换成===，===不会自动帮你转换成正确的类型再比较 -->
            if(res.code==505){
                window.location='/views/user/login.html';
            } else if (res.code==200) {
                //js操作dom
                //获取json数组
                let arr = res.data;
                console.log(arr);
                //获取到tbody对象
                let tbody = document.getElementById("cart_tby");
                //定义一个字符串 - 模板字符串
                let str = ``;
                //遍历arr,有一条json数据,创建一个tr
                for(let i=0;i<arr.length;i++){
                    str+=` <tr>
                            <td><input type="checkbox" name="ck" onchange="update_sum(this)"></td>
                            <td>${i+1}</td>
                            <td><img src="/imgs/${arr[i].imgUrl}"></td>
                            <td>${arr[i].name}</td>
                            <td>${arr[i].price}</td>
                            <td>${arr[i].remark}</td>
                            <td><input style="width: 80px" class="form-control" type="number" value="${arr[i].total}" onchange="update_price_and_sum(this, ${i}, ${arr[i].id})"></td>
                            <td>${arr[i].price*arr[i].total}</td>
                            <td>${arr[i].createDate}</td>
                            <td><a href="#" class="text-danger"><span class="glyphicon glyphicon-trash" onclick="del(this, ${arr[i].id})"></span></a></td>
                        </tr>`;
                    // total加入数组
                    total_list.push(arr[i].total);
                }
                // 更新内容
                tbody.innerHTML = str;
            }
        })
    })


    function del(obj,id){
        let token = localStorage.getItem("token");

        let tbody = document.getElementById("cart_tby");

        $.ajax({
            type:'delete',
            url:'/cart?token='+token+'&id='+id,
            success:function(res){
                if(res.code==200){
                    //span所在的tr
                    let tr = obj.parentElement.parentElement.parentElement;
                    tbody.removeChild(tr);
                    // 如果删除的是选中的商品，更新结算金额
                    let is_checked = obj.parentElement.parentElement.parentElement.children[0].children[0].checked;
                    if (is_checked) {
                        // 拿到总价
                        let total_price = obj.parentElement.parentElement.previousElementSibling.previousElementSibling.innerText;
                        // 更新结算金额
                        end_sum -= Number(total_price);
                        document.getElementById("end_sum").innerText = end_sum;
                    }
                }
            }
        })
    }


    function select_all(obj) {
        let choose_all = true;
        if (obj.checked) {
            choose_all = false;
        }
        let ck_list = document.getElementsByName("ck");
        for (let i = 0; i < ck_list.length; i++) {
            if (ck_list[i].checked == choose_all) {
                // ck_list[i].checked = choose_all;通过这个方法改变的选中状态，不会触发checkbox的onchange
                // 需要点击才会触发
                ck_list[i].click();
            }
        }

    }

    // 结算总价
    let end_sum = Number(0);

    function update_sum(obj) {

        // 得到总价元素
        let node = obj.parentElement;
        for (let i = 0; i < 7; i++) {
            node = node.nextElementSibling;
        }

        // 判断是选中事件还是取消选中事件
        if (obj.checked) {
            end_sum += Number(node.innerText);
        } else {
            end_sum -= Number(node.innerText);
        }
        // 更新结算总价
        document.getElementById("end_sum").innerText = end_sum;
    }

    function update_price_and_sum(obj, i, id) {
        let token = localStorage.getItem("token");

        // 先请求更新数据库的total
        $.ajax({
            type:'put',
            url:`/cart/${id}/${obj.value}?token=${token}`,
            success:function(res){
                // 请求成功异步更新前端
                if(res.code==200){
                    // 拿到单价
                    let price = obj.parentElement.previousElementSibling.previousElementSibling.innerText;
                    // 得到总价
                    let total_price = price * obj.value;
                    // 前端更新总价
                    obj.parentElement.nextElementSibling.innerText = total_price;

                    // 前端更新结算总价
                    // 先判断是否为选中状态，选中的才需要更新，没选中的不用更新，等选中的时候更新
                    let node = obj.parentElement;
                    for (let i = 0; i < 6; i++) {
                        node = node.previousElementSibling;
                    }
                    if (node.childNodes[0].checked) {
                        end_sum += total_price - price * total_list[i];
                        document.getElementById("end_sum").innerText = end_sum;
                    }
                    // 更新total记录的数组
                    total_list[i] = obj.value;
                }
            }
        })
    }
</script>
</body>
</html>